<template>
    <div>
      <header1></header1>
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <h1>{{title}}</h1>
          </div>
        </el-col>
        <el-col :span="2" :offset="4">
          <el-button type="warning" @click="modified">修改</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content bg-purple">
             <p v-html="html"></p>
          </div>
        </el-col>        
      </el-row>
    </div>
</template>

<script>
import header from '../components/header.vue';

  export default{
    data(){
      return{
        html:'',
        title:'',
      };
    },
    methods: {
      modified(){
        this.$store.state.Article.article_content = this.html;
        this.$store.state.Article.article_title = this.title;
        console.log(this.$store.state.articleid)
        console.log(this.$store.state.Article.article_title)
        this.$router.push({path:'../write'})
      },
      getArticle(){
        let that = this;
        this.$axios.post("/queryArticleById",{
            article_id:this.$store.state.articleid,
        })
        .then((res)=>{
          that.html = res.data.object.article_content;
          that.title = res.data.object.article_title;
          
          // console.log(res);
          // console.log("that:"+that.html);
        })
        .catch((err)=>{
          console.log(err)
        })
      }
    },
    components:{'header1':header},
    created(){
        this.getArticle();
    }
  }

</script>

<style lang="scss">
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
    
</style>